<template>
  <page-frame>
    <div class="order-management">
      <div class="toptitle">
        <div class="left">健康计划</div>
        <div class="right">
          <div class="btns">
            <el-button @click="addPlan" class="lightGreenBtn">新增计划</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row>
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="queryData.fileId" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="input-item" v-show="queryData.fileId=='1'">
                <el-input v-model="queryData.userName" placeholder="请输入会员编号">
                </el-input>
              </div>
              <div class="input-item" v-show="queryData.fileId=='2'">
                <el-input v-model="queryData.userName" placeholder="请输入会员名称">
                </el-input>
              </div>

            </el-col>
            <el-col :span="2">
                <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="schedule=true"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="会员编号"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="会员名称"
            >
            </el-table-column>
            <el-table-column
              prop="planTime"
              label="计划周期"
            >
            </el-table-column>
            <el-table-column
              prop="planName"
              label="计划名称"
            >
            </el-table-column>
            <el-table-column
              prop="teminal"
              label="管理目标"
            >
            </el-table-column>
            <el-table-column
              prop="principal"
              label="负责人"
            >
            </el-table-column>

            <el-table-column
              prop="operating"
              label="操作"
              width=""
            >
              <template scope="scope">
                <el-button type="text" size="small" @click.stop="edit">详情</el-button>
                <el-button type="text" size="small" @click.stop="edit">管理</el-button>
                <el-button type="text" size="small" @click.stop="edit">总结</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="pageData.currentPage1"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  export default {
    methods: {
      init(){
        this.loadTableData();
      },
      loadTableData(){

      },
      retreat(){
        this.$router.push({name: ""});
      },
      query(){
      },
      getfileList(){

      },
      getOrgList(){

      },
      exportOrder(){

      },
      edit(){
      },
      handleCurrentChange(val) {

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData(this.queryData, val);
      },
    },
    mounted: function () {
      this.init();
    },
    components: {
      'my-compont1': {
//        props:['msg'], /*这里是为子模板传值*/
        template: "<input type='text' value='my-compont1'/>"
      },
      'my-compont2': {
//        props:['msg'], /*这里是为子模板传值*/
        template: "<input type='text' value='my-compont2'/>"
      }
    },
    data () {
      return {
        leaveDate: "",
        leave: false,
        schedule: false,
        queryData: {
          fileId: 1,
        },
        fileList: [{
          fileId: 1,
          fileName: "会员编号"
        }, {
          fileId: 2,
          fileName: "会员名称",
        }],

        tableData: [{
          "id": "P010000001",
          "name": "王大锤",
          "planTime": "2017-03-06  至  2018-03-06",
          "planName": "血压管理",
          "teminal": "控制血压在140/90mmgh以内",
          "principal": "张三",
        },
          {
            "id": "P010000002",
            "name": "王中锤",
            "planTime": "2017-03-06  至  2018-03-06",
            "planName": "血压管理",
            "teminal": "控制血压在140/90mmgh以内",
            "principal": "张三",
          },
          {
            "id": "P010000003",
            "name": "王小锤",
            "planTime": "2017-03-06  至  2018-03-06",
            "planName": "血压管理",
            "teminal": "控制血压",
            "principal": "张三",
          }],
        total: 1,
        pageData: [{
          currentPage1: 1,
        }],
      }
    },
    methods: {
      init() {

      },
      addPlan(){
        this.$router.push({name: ''})
      },
    },

    mounted: function () {
      this.init();
    },
  }
</script>
<style>

  .input .btns {
    float: none !important;
    display: inline-block;
  }

  .el-input {
    width: 80%;
  }

  .input input {
    display: inline-block;
  }

  .scroll {
    height: calc(100vh - 122px);
    padding: 0px 50px;
  }

  .el-pagination {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .el-select {
    display: block;
    position: relative;
  }

  .query {
    margin-right: 30px;
  }
</style>
